<template>
  <div>
    <div class="shopping-cart">
      <h1>Shopping Cart</h1>
      <div>
        <button type="button" @click="addShop">模拟新增商品</button>
        <button type="button" @click="editShop">模拟修改商品</button>
      </div>

      <!-- 商品列表 -->
      <div class="product-list">
        <!-- 把购物车封装成组件 -->
        <ShopItem1 v-for="shop in shops" :key="shop.id" :shop></ShopItem1>
        <!-- <div class="product">
          <img src="https://via.placeholder.com/100" alt="Product Image" />
          <div class="product-details">
            <h2>Product 1</h2>
            <p>$100.00</p>
            <div class="quantity">
              <button>-</button>
              <input type="text" value="1" />
              <button>+</button>
            </div>
          </div>
        </div>

        <div class="product">
          <img src="https://via.placeholder.com/100" alt="Product Image" />
          <div class="product-details">
            <h2>Product 2</h2>
            <p>$50.00</p>
            <div class="quantity">
              <button>-</button>
              <input type="text" value="1" />
              <button>+</button>
            </div>
          </div>
        </div> -->
      </div>

      <!-- 购物车总结 -->
      <div class="cart-summary">
        <h3>Cart Summary</h3>
        <p>Total Items: <span>{{  shops.length }}</span></p>
        <p>Total Price: <span>${{sumPrice}}</span></p>
        <button class="checkout-btn" @click="Checkout">Checkout</button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import ShopItem1 from './components/ShopItem1.vue';
import { type IShopInfo } from '@/types/shop';

const shops = ref<IShopInfo[]>([
  {
    id: '1',
    name: 'Apple',
    count: 1,
    price: 100,
    picture:
      'https://ts2.cn.mm.bing.net/th?id=OIP-C.-Y9W58cVwHMaH021cnmzGgHaIY&w=234&h=266&c=8&rs=1&qlt=90&o=6&cb=13&dpr=1.6&pid=3.1&rm=2',
    stock: 10
  },
  {
    id: '2',
    name: 'Banana',
    count: 1,
    price: 50,
    picture:
      'https://ts2.cn.mm.bing.net/th?id=OIP-C.JIE9eUSxFmiw15Du2ZC-XAHaGJ&w=274&h=227&c=8&rs=1&qlt=90&o=6&cb=13&dpr=1.6&pid=3.1&rm=2',
    stock: 5
  },
  {
    id: '3',
    name: 'Orange',
    count: 1,
    price: 20000,
    picture:
      'https://ts2.cn.mm.bing.net/th?id=OIP-C.7DUeKG3rK4bwCv7Yei1--wHaGB&w=277&h=225&c=8&rs=1&qlt=90&o=6&cb=13&dpr=1.6&pid=3.1&rm=2',
    stock: 50
  }
])

const addShop = ()=>{
  shops.value.push({
    id: '4',
    name: 'Bread',
    count: 1,
    price: 100,
    picture:
      'https://ts3.cn.mm.bing.net/th?id=OIP-C.TZXl9sWf-mYfTBBt7kd-PQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&cb=13&dpr=1.6&pid=3.1&rm=2',
    stock: 10
  })
}

const editShop = ()=>{
  shops.value[0].price = 2000
}

const sumPrice = computed(()=>{
  return shops.value.reduce((pre,cur)=>{
    return pre + cur.price * cur.count
  },0)
})

const Checkout = ()=>{
  alert('Check out successfully！Total price is :$' + sumPrice.value);
  shops.value.forEach(shop=>shop.count = 0)
}
</script>

<style lang="scss" scoped>
/* 主体购物车样式 */
.shopping-cart {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}



/* 购物车总结 */
.cart-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #ccc;
  text-align: right;
}

.cart-summary h3 {
  margin-bottom: 10px;
}

.cart-summary p {
  font-size: 1.2em;
  margin: 5px 0;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.checkout-btn:hover {
  background-color: #0b7dda;
}
</style>
